<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_猜数字练习</title>
</head>
<body>
<h4>已生成一个1~100的随机数:</h4>
<input type="text" id="input1" placeholder="请输入你猜的数字!">
<button onclick="guess()">点我验证</button>
<h4>小提示:<span></span></h4>
<script>
    //1.生成随机数
    //Math.random()生成[0,1)之间的随机小数
    //[0,100)+1=[1,101)=>[1,100]
    let num = Math.floor(Math.random()*100)+1;
    console.log(num);
    //6.定义一个变量，用来统计用户猜的次数
    let count = 0;
    //2.定义猜方法的函数
    function guess(){
        //3.拿到用户猜的数字
        let n = document.getElementById('input1');
        //n = parseInt(n.value);
        //8.对接收的数据做合法性的正则校验
        //一对正斜杠(/)用来包裹正则表达式
        //^表示开头,$表示结尾,\d表示数字 +表示至少出现一次
        //.test(参数) 用来判断是否匹配前面的正则表达式,匹配返回true,不匹配返回false
        if(!/^\d+$/.test(n)){
            alert('请输入数字');
            return;
        }
        //4.获取用来显示结果的span元素
        let spanE = document.querySelector('span');
        console.log(spanE)
        //7.每猜一次，统计次数+1
        count++;
        //5.拿着用户猜的数字和生成的随机数进行比较
        if(n<num){
            spanE.innerHTML = '猜小了';

        }else if(n>num){
            spanE.innerHTML = '猜大了';

        }else{
            spanE.innerHTML = '恭喜你，猜了' + count + '次就猜对了';
            //alert('你猜了'+count+'次');
        }
    }
</script>
</body>
</html>